<div>
  <form nz-form [formGroup]="validateForm">
    <div nz-form-item nz-row>
      <div nz-form-label nz-col [nzSpan]="6">
        <label nz-form-item-required>使用单位</label>
      </div>
      <div nz-form-control nz-col [nzSpan]="8" nzHasFeedback>
        <nz-input [(ngModel)]="demandMaintenance.userPartyName" [nzDisabled]="true" formControlName="userPartyId" name="userPartyId"></nz-input>
        <div nz-form-explain *ngIf="getFormControl('userPartyId').dirty && getFormControl('userPartyId').hasError('required')">使用单位不能为空!</div>
      </div>
    </div>
    <div nz-form-item nz-row>
      <div nz-form-label nz-col [nzSpan]="6">
        <label nz-form-item-required>维保单位</label>
      </div>
      <div nz-form-control nz-col [nzSpan]="8" nzHasFeedback>
        <nz-select nzAllowClear [nzPlaceHolder]="'请选择'" [nzDisabled]="true" formControlName="maintenancePartyId" name="maintenancePartyId"
                   [(ngModel)]="demandMaintenance.maintenancePartyId" [nzShowSearch]="true">
          <nz-option *ngFor="let option of weibaoList" [nzLabel]="option.secondPartyName" [nzValue]="option.secondParty">
          </nz-option>
        </nz-select>
        <div nz-form-explain *ngIf="getFormControl('maintenancePartyId').dirty && getFormControl('maintenancePartyId').hasError('required')">维保单位不能为空!</div>
      </div>
    </div>

    <div nz-form-item nz-row>
      <div nz-form-label nz-col [nzSpan]="6">
        <label nz-form-item-required>制造单位</label>
      </div>
      <div nz-form-control nz-col [nzSpan]="8" nzHasFeedback >
        <nz-select  name="createCompanyName" nzAllowClear [nzPlaceHolder]="'请选择'" [nzDisabled]="true" [nzMultiple]="true" [(ngModel)]="demandMaintenance.createCompanyName" [nzShowSearch]="true" formControlName="createCompanyName" name="createCompanyName">
          <nz-option *ngFor="let option of createList" [nzLabel]="option.value" [nzValue]="option.value">
          </nz-option>
        </nz-select>
        <div nz-form-explain *ngIf="getFormControl('createCompanyName').dirty && getFormControl('createCompanyName').hasError('required')">制造单位不能为空!</div>
      </div>
    </div>

    <div *ngFor="let item of insuranceList;index as i">
      <div nz-form-item nz-row>
        <div nz-form-label nz-col [nzSpan]="6">
          <label  nz-form-item-required>保险公司名称{{i+1}}</label>
        </div>
        <div nz-form-control nz-col [nzSpan]="8" nzHasFeedback>
          <nz-input [(ngModel)]="insuranceList[i]['name']" formControlName="insuranceName{{i+1}}" [nzPlaceHolder]="'请输入保险公司名称'"></nz-input>
          <div nz-form-explain *ngIf="getFormControl('insuranceName').dirty && getFormControl('insuranceName').hasError('required')">保险公司名称不能为空!</div>
        </div>
        <button *ngIf='i' nz-button [nzSize]="'small'" [nzType]="'primary'" (click)="deleteInsurance(insuranceList[i])" style="margin-left: 5px;margin-top: 2px;">删除</button>
      </div>
      <div nz-form-item nz-row>
        <div nz-form-label nz-col [nzSpan]="6">
          <label  nz-form-item-required>保险到期时间{{i+1}}</label>
        </div>
        <div nz-form-control nz-col [nzSpan]="8" nzHasFeedback>
          <nz-datepicker  [(ngModel)]="insuranceList[i]['date']" formControlName="insuranceDate{{i+1}}" [nzPlaceHolder]="'选择保险到期时间'" [nzSize]="'large'" style="width:100%"></nz-datepicker>
        </div>
      </div>
    </div>

    <div nz-row>
      <button nz-button style="margin-left: 20%" [nzSize]="'small'" (click)="addInsurance()" [nzType]="'primary'">添加保险公司</button>
    </div>

    <div nz-form-item nz-row>
      <div nz-form-label nz-col [nzSpan]="6">
        <label nz-form-item-required>是否有物联网系统</label>
      </div>
      <div nz-form-control nz-col [nzSpan]="8">
        <nz-radio-group [(ngModel)]="demandMaintenance.haveTestSystem" formControlName="haveTestSystem" name = "haveTestSystem" (ngModelChange)="changeMintenceCycle()">
          <label nz-radio-button [nzValue]="'0'">
            <span>是</span>
          </label>
          <label nz-radio-button [nzValue]="'1'" [nzChecked]="true">
            <span>否</span>
          </label>
        </nz-radio-group>
      </div>
    </div>

    <div nz-form-item nz-row>
      <div nz-form-label nz-col [nzSpan]="6">
        <label nz-form-item-required>是否签订全包维保</label>
      </div>
      <div nz-form-control nz-col [nzSpan]="8">
        <nz-radio-group [(ngModel)]="demandMaintenance.haveInsurance" formControlName="haveInsurance" name = "haveInsurance" (ngModelChange)="changeMintenceCycle()">
          <label nz-radio-button [nzValue]="'0'">
            <span>是</span>
          </label>
          <label nz-radio-button [nzValue]="'1'" [nzChecked]="true">
            <span>否</span>
          </label>
        </nz-radio-group>
      </div>
    </div>

    <div nz-form-item nz-row>
      <div nz-form-label nz-col [nzSpan]="6">
        <label nz-form-item-required>维保周期</label>
      </div>
      <div nz-form-control nz-col [nzSpan]="8" nzHasFeedback>
        <nz-select  name="maintenanceCycle" nzAllowClear [nzPlaceHolder]="'请选择'" [(ngModel)]="demandMaintenance.maintenanceCycle" [nzShowSearch]="true" formControlName="maintenanceCycle">
          <nz-option *ngFor="let option of maintenanceCycleList" [nzLabel]="option.label" [nzValue]="option.value">
          </nz-option>
        </nz-select>
        <div nz-form-explain *ngIf="getFormControl('maintenanceCycle').dirty && getFormControl('maintenanceCycle').hasError('required')">维保周期不能为空!</div>
      </div>
    </div>

    <div nz-form-item nz-row>
      <div nz-form-label nz-col [nzSpan]="6">
        <label nz-form-item-required>添加电梯</label>
      </div>
      <div nz-col [nzSpan]="8" nzHasFeedback>
        <nz-input [(ngModel)]="outsidenumStr" [nzType]="'textarea'" [nzRows]="'5'" formControlName="outsidenumStr" name="outsidenumStr"
                  (click)="addElevator(titleElevator, contentElevator, footerElevator)"></nz-input>
      </div>
      <button nz-button nz-col [nzOffset]="2" (click)="clear()"  [nzType]="'primary'"><span>清除</span></button>
    </div>

    <div nz-form-item nz-row>
      <div nz-form-label nz-col [nzSpan]="6">
        <label>其他说明</label>
      </div>
      <div nz-col [nzSpan]="8" nzHasFeedback>
        <nz-input [(ngModel)]="demandMaintenance.otherNotes" [ngModelOptions]="{standalone: true}" [nzType]="'textarea'" [nzRows]="'5'" name="otherNotes"></nz-input>
      </div>
    </div>

    <div nz-form-item nz-row>
      <div nz-form-label nz-col [nzSpan]="6">
        <label nz-form-item-required>实施时间</label>
      </div>
      <div nz-form-control nz-col [nzSpan]="12" nzHasFeedback>
        <nz-datepicker [nzSize]="'large'" [nzFormat]="'YYYY-MM-DD'" formControlName="startDate" name="startDate" [nzPlaceHolder]="'开始日期'" [(ngModel)]="demandMaintenance.startDate"></nz-datepicker>
        ~
        <nz-datepicker [nzSize]="'large'" [nzFormat]="'YYYY-MM-DD'" formControlName="endDate" name="endDate" [nzPlaceHolder]="'结束日期'" [(ngModel)]="demandMaintenance.endDate"></nz-datepicker>
      </div>
    </div>

    <div nz-form-item nz-row style="margin-bottom:8px;">
      <div nz-form-control nz-col [nzSpan]="4" [nzOffset]="8">
        <button nz-button class="login-form-button" [nzType]="'primary'" [nzSize]="'large'" (click)="submitForm()">修改</button>
      </div>
      <div nz-form-control nz-col [nzSpan]="2">
        <button nz-button class="login-form-button" [nzType]="'primary'" [nzSize]="'large'" (click)="quit()">取消</button>
      </div>
    </div>
  </form>
</div>

<!--添加电梯 start -->
<nz-modal>
  <ng-template #titleElevator>
    <span>{{modelTitle}}</span>
  </ng-template>
  <ng-template #contentElevator>
    <nz-collapseset>
      <nz-collapse [nzTitle]="panels.name" [nzActive]="panels.active" [nzDisabled]="panels.disabled">
        <form nz-form>
          <div nz-form-item nz-row>
            <div nz-form-label nz-col [nzXs]="2">
              <label>电梯类型</label>
            </div>
            <div nz-form-control nz-col [nzSpan]="4">
              <nz-select nzAllowClear [nzPlaceHolder]="'请选择'" [nzShowSearch]="true"  [nzSize]="'small'"
                         [(ngModel)]="elevatorInfo.elevatorTypeId" name="elevatorTypeId" [disabled]="false">
                <nz-option *ngFor="let item of elevatorTypes" [nzLabel]="item.label" [nzValue]="item.value"></nz-option>
              </nz-select>
            </div>

            <div nz-form-label nz-col [nzXs]="2">
              <label>电梯编号</label>
            </div>
            <div nz-form-control nz-col [nzSpan]="4">
              <nz-input [nzPlaceHolder]="'请输入'" [(ngModel)]="elevatorInfo.elevatorNum" name="planName">
              </nz-input>
            </div>

            <div nz-form-label nz-col [nzXs]="3">
              <label>是否参与投保</label>
            </div>
            <div nz-form-control nz-col [nzSpan]="4">
              <nz-select nzAllowClear [nzPlaceHolder]="'请选择'" [nzShowSearch]="true"  [nzSize]="'small'"
                         [(ngModel)]="elevatorInfo.isInsure" name="isInsure" [disabled]="false">
                <nz-option [nzLabel]="'是'" [nzValue]="'是'"></nz-option>
                <nz-option [nzLabel]="'否'" [nzValue]="'否'"></nz-option>
              </nz-select>
            </div>

            <button style="margin-left: 50px"  nz-button  [nzType]="'primary'" (click)="queryElevator()">查询</button>
            <button style="margin-left: 20px"  nz-button   [nzType]="'primary'" (click)="saveElevators()">保存</button>
          </div>
        </form>
      </nz-collapse>
    </nz-collapseset>
    <nz-table #nzTable [nzDataSource]="elevatorList" nzSize="middle" [nzBordered]="true" [nzIsPagination]="false" (nzDataChange)="displayDataChange($event)">
      <thead nz-thead>
      <tr>
        <th nz-th [nzCheckbox]="true">
          <label nz-checkbox [(ngModel)]="allChecked" [nzIndeterminate]="indeterminate" (ngModelChange)="checkAll($event)">
          </label>
        </th>
        <th nz-th>
          <span>电梯编码</span>
        </th>
        <th nz-th>
          <span>电梯类型</span>
        </th>
        <th nz-th>
          <span>电梯安全管理员</span>
        </th>
        <th nz-th>
          <span>电梯安装地址</span>
        </th>
        <th nz-th>
          <span>维保人员</span>
        </th>
        <th nz-th>
          <span>维保人员初次取证时间</span>
        </th>
        <th nz-th>
          <span>是否有安全责任险</span>
        </th>
      </tr>
      </thead>
      <tbody nz-tbody>
      <tr nz-tbody-tr *ngFor="let data of elevatorList">
        <td nz-td [nzCheckbox]="true">
          <label nz-checkbox [nzDisabled]="data.disabled" [(ngModel)]="data.checked" (ngModelChange)="refreshStatus($event)">
          </label>
        </td>
        <td nz-td>{{data.elevatorNum}}</td>
        <td nz-td>{{data.elevatorTypeName}}</td>
        <td nz-td>{{data.safeUserName}}</td>
        <td nz-td>{{data.buildAddr}}</td>
        <td nz-td>{{data.maintenanceUserFirstName}}</td>
        <td nz-td>{{data.firstgt | dateFormat}}</td>
        <td nz-td>{{data.isInsure}}</td>
      </tr>
      </tbody>
    </nz-table>
    <nz-pagination [nzPageIndex]="elevatorInfo.currentPage" nzShowTotal [nzTotal]="total" nzShowSizeChanger
                   (nzPageSizeChange)="nzPageSizeChange($event)" (nzPageIndexChange)="nzPageIndexChange($event)"
                   (nzPageIndexClickChange)="nzPageIndexClickChange($event)" [nzPageSize]="elevatorInfo.pageSize"></nz-pagination>
  </ng-template>
  <ng-template #footerElevator>
    <div>
    </div>
  </ng-template>
</nz-modal>

